<template>
  <div
    style="display: flex; flex-direction: column; flex: 1"
    v-loading="loading"
    element-loading-text="加载中..."
  >
    <div style="display: flex; justify-content: space-between; margin-bottom: 5px">
      <div style="display: flex; gap: 5px">
        <router-link to="/sla/slanew">
          <HPlainButton> 新建SLA </HPlainButton>
        </router-link>
        <el-dropdown trigger="click">
          <HButton :disabled="ids.length === 0">
            批量操作
            <el-icon class="el-icon--right">
              <ArrowDown />
            </el-icon>
          </HButton>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="changeAll(1, '启用')">
                <el-icon>
                  <CircleCheck />
                </el-icon>
                批量启用
              </el-dropdown-item>
              <el-dropdown-item @click="changeAll(2, '禁用')">
                <el-icon>
                  <Warning />
                </el-icon>
                批量禁用
              </el-dropdown-item>
              <el-dropdown-item @click="changeAll(3, '删除')">
                <el-icon>
                  <Delete />
                </el-icon>
                批量删除
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div style="display: flex; gap: 5px">
        <el-input
          placeholder="SLA名称"
          @keyup.enter="getnetworkListRows"
          @clear="getnetworkListRows"
          v-model="name"
          clearable
        />
        <HButton type="primary" @click="getnetworkListRows">
          <el-icon>
            <Search />
          </el-icon>
          搜索
        </HButton>
      </div>
    </div>
    <div class="table" style="flex: 1; position: relative">
      <el-table
        :border="true"
        height="100%"
        style="position: absolute"
        stripe
        resizable
        :data="tableDataList"
        @selection-change="handleChange"
        @row-dblclick="goEdit"
      >
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
        <el-table-column type="selection" width="40" fixed />

        <!-- 序号 -->
        <el-table-column show-overflow-tooltip fixed type="index" label="序号" width="50" />

        <!-- SLA名称 -->
        <el-table-column show-overflow-tooltip fixed label="SLA名称" width="240">
          <template v-slot="item">
            <span @click="goEdit(item.row)" class="text_color">{{ item.row.name }}</span>
          </template>
        </el-table-column>

        <!-- SLA状态 -->
        <el-table-column show-overflow-tooltip prop="status" label="SLA状态" width="90">
          <template #default="scope">
            <HStatus type="info" v-if="scope.row.status">禁用</HStatus>
            <HStatus v-else>启用</HStatus>
          </template>
        </el-table-column>

        <!-- 描述 -->
        <el-table-column show-overflow-tooltip prop="remark" label="描述" min-width="150" />

        <!-- 触发条件 -->
        <el-table-column show-overflow-tooltip prop="conditions" label="触发条件" width="100" />

        <!-- 提醒方式 -->
        <el-table-column show-overflow-tooltip prop="remindMode" label="提醒方式" width="140">
          <template v-slot="item">
            <span>{{ remindMode(item.row.remindMode) }}</span>
          </template>
        </el-table-column>

        <!-- 生效时间 -->
        <el-table-column prop="dateType" label="生效时间" width="80">
          <template #default="scope">
            <span>{{ scope.row.dateType == 1 ? '全天' : '时间范围' }}</span>
          </template>
        </el-table-column>

        <!-- 适用模块 -->
        <el-table-column show-overflow-tooltip prop="modules" label="适用模块" width="110" />

        <!-- 创建时间 -->
        <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="130" />

        <!-- 更新时间 -->
        <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="130" />
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="footer">
      <Pagination
        ref="pagination"
        :list_total="total"
        @size-change="getnetworkListRows"
        @current-change="getnetworkListRows"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '../../../components/Pagination/index.vue'
  import { Search, Delete, Warning, CircleCheck, ArrowDown } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router'
  import useSLA from './useSLA'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import HButton from '@/components/common/button/HButton.vue'
  import HStatus from "@/components/common/status/HStatus.vue";

  let {
    loading,
    changeAll,
    ids,
    getnetworkListRows,
    pagination,
    total,
    remindModeList,
    tableDataList,
    name,
    handleChange,
  } = useSLA()
  const router = useRouter()
  // SLA编辑
  const goEdit = (n: { id: string }) => {
    router.push('/sla/detail/' + n.id)
  }
  const remindMode = (arr) => {
    let temp = []
    if (arr) {
      temp = remindModeList.value.filter((o) => {
        if (arr.includes(o.val)) {
          return o
        }
      })
      return temp.map((i) => i.name).join()
    }
  }
  // onMounted(() => {
  //   getnetworkListRows()
  // })
  defineExpose({ getnetworkListRows })
</script>

<style scoped lang="scss">
  @import './index';
</style>
